<template>
  <div class="content">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ isAdd ? "添加权限" : "权限信息" }} </span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="isAdd = true"
          >新增</el-button
        >
      </div>
      <avue-form
        ref="form"
        disabled
        v-model="obj"
        :option="option"
        @submit="submit"
        @reset-change="
          reset();
          isAdd = false;
        "
      >
      </avue-form>
    </el-card>
  </div>
</template>

<script>
import { put, add } from "@/api/base.js";

export default {
  name: "permission",
  props: {
    info: {
      type: Object,
    },
    tree: {
      type: Array,
    },
  },
  data() {
    return {
      obj: {
        id: null,
        name: "",
        tag: "",
        parent_id: null,
        remark: "",
      },
      isAdd: false,
    };
  },
  computed: {
    hasId() {
      return !!this.obj.id;
    },
    disabled() {
      return this.isAdd || this.hasId;
    },
    option() {
      return {
        emptyBtn: this.isAdd,
        submitBtn: this.hasId || this.isAdd,
        submitText: this.isAdd ? "新增" : "更新",
        emptyText: "取消",
        column: [
          {
            label: "权限名",
            prop: "name",
            span: 24,
            disabled: !this.disabled,
          },
          {
            label: "权限标记",
            prop: "tag",
            span: 24,
            disabled: !this.disabled,
          },
          {
            label: "上级权限",
            prop: "parent_id",
            type: "tree",
            dicData: this.tree,
            span: 24,
            disabled: !this.disabled,
          },
          {
            label: "排序",
            prop: "sort",
            span: 24,
            disabled: !this.disabled,
          },
          {
            label: "权限备注",
            prop: "remark",
            type: "textarea",
            span: 24,
            disabled: !this.disabled,
          },
        ],
      };
    },
  },
  watch: {
    info: {
      handler(val) {
        this.obj = val;
        this.isAdd = false;
      },
    },
  },
  methods: {
    submit(form, done) {
      if (this.isAdd && !this.hasId) {
        add(`permission`, this.obj)
          .then((res) => {
            this.$message.success("创建成功");
            done();
            this.$emit("refresh");
            this.reset();
          })
          .catch(() => {
            done();
          });
      } else {
        let id = this.obj.id;
        put(`permission/${id}`, this.obj)
          .then((res) => {
            this.$message.success("编辑成功");
            done();
            this.$emit("refresh");
            this.reset();
          })
          .catch(() => {
            done();
          });
      }
    },
    reset() {
      this.obj = {
        id: null,
        name: "",
        tag: "",
        parent_id: null,
        remark: "",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  margin: 10px;
  padding: 10px;
}
</style>

